import { useRegister } from '@/hooks';
import { Link } from 'react-router-dom';
import { useEnter } from '@/hooks';

const Register = () => {
   const { values, isFirstSubmit, handleChange, errors, handleSubmit } =
      useRegister();

   useEnter(handleSubmit);
   return (
      <main className="full bg-slate-400">
         <div className="box max-w-sm mx-auto mt-48">
            <h2 className="text-center mb-4">Register</h2>
            <form>
               <div className="form-item">
                  <div className="form-item-content">
                     <label className='w-1/3'>Username</label>
                     <input
                        autoFocus
                        value={values.username}
                        onChange={handleChange('username')}
                     />
                  </div>

                  {!isFirstSubmit && errors.username && (
                     <div className="form-item-msg">{errors.username}</div>
                  )}
               </div>

               <div className="form-item">
                  <div className="form-item-content">
                     <label className='w-1/3'>Email</label>
                     <input
                        value={values.email}
                        onChange={handleChange('email')}
                     />
                  </div>

                  {!isFirstSubmit && errors.email && (
                     <div className="form-item-msg">{errors.email}</div>
                  )}
               </div>

               <div className="form-item">
                  <div className="form-item-content">
                     <label className='w-1/3'>Password</label>
                     <input
                        value={values.password}
                        onChange={handleChange('password')}
                        type="new-password"
                     />
                  </div>

                  {!isFirstSubmit && errors.password && (
                     <div className="form-item-msg">{errors.password}</div>
                  )}
               </div>

               <div className="form-item">
                  <div className="form-item-content">
                     <label className='w-1/3'>Confirm Password</label>
                     <input
                        value={values.confirmPassword}
                        onChange={handleChange('confirmPassword')}
                        type="new-password"
                     />
                  </div>

                  {!isFirstSubmit && errors.confirmPassword && (
                     <div className="form-item-msg">
                        {errors.confirmPassword}
                     </div>
                  )}
               </div>
            </form>
            <div className="text-center mt-4">
               <button className="w-full" onClick={handleSubmit}>
                  Submit
               </button>
            </div>
            <div className="text-center text-xs my-3">
               <span>已有账号？</span>
               <Link to="/login">点击登录</Link>
            </div>
         </div>
      </main>
   );
};

export default Register;
